<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link type="text/css" rel="stylesheet" href="css/fyz.style.css"></link>		
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px; font-size:50px; font-family:'微软雅黑'; color:#fff;}
dl.box{width:800px;  margin:0px auto;}
dl.box dt.box{width:100%; height:300px; line-height:300px; text-align:center; background:orange; margin:30px auto;}
dl.box dt.box span{display:inline-block; width:100px; height:100px; line-height:100px; background:cyan; opacity:0;
transition:all 1s ease-in-out;
}
dl.box dt.box span.spanHover{background:red; opacity:1;}
dl.box dd.box{margin:0px auto; text-align:center; line-height:35px;  color:#fff;  cursor:pointer;}
dl.box dd.box span{margin-right:10px; background:orange; display:inline-block; font-size:20px; width:100px; height:30px;}
</style>
</head>
<body>
<dl class='box box1'>
	<dt class='box'>
		<span class="One">flipInX</span>
		<span class="Two">fadeInUp</span>
		<span class="Thr">3</span>
		<span class="Four">4</span>
		<span class="Five">5</span>
	</dt>
	<dd class='box'><span class="add">ADD</span><span class="move">MOVE</span></dd>
</dl>
</body>
<script type="text/javascript">
$('dd.box>span.add').click(function(){
	$('dt.box>span.One').animate({'opacity':'0.5'},100,function(){
		$(this).addClass('animated flipInX');
		$('dt.box>span.Two').animate({'opacity':'0.5'},100,function(){
			$(this).addClass('animated fadeInUp');
		});
	});
});
</script>
</html>
